<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CKEditor 5 – Vue.js Component – development sample</title>
	<style>
		body {
			max-width: 800px;
			margin: 20px auto;
		}

		textarea {
			width: 100%;
			height: 100px;
			font-family: monospace;
		}
	</style>
</head>
<body>
	<script src="../node_modules/vue/dist/vue.global.js"></script>
	<script src="../node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
	<script src="../dist/ckeditor.js"></script>

	<div id="app">
		<h1>CKEditor 5 – Vue.js 3.x Component – development sample</h1>

		<ckeditor
			tag-name="textarea"
			v-model="editorData"
			:editor="editor"
			:config="editorConfig"
			:disabled="editorDisabled"
			@ready="onEditorReady"
			@focus="onEditorFocus"
			@blur="onEditorBlur"
			@input="onEditorInput"
			@destroy="onEditorDestroy"
		>
		</ckeditor>
		<button @click="toggleEditorDisabled">
			{{ editorDisabled ? 'Enable' : 'Disable' }} editor
		</button>

		<h2>Live editor data</h2>
		<textarea v-model="editorData"></textarea>
	</div>

	<script>
		window.app = Vue.createApp(
			{
				data() {
					return {
						editor: ClassicEditor,
						editorData: '<p>Hello world!</p>',
						editorConfig: { toolbar: [ 'heading', '|', 'bold', 'italic' ] },
						editorDisabled: false
					};
				},
				methods: {
					toggleEditorDisabled() {
						this.editorDisabled = !this.editorDisabled;
					},
					onEditorReady( editor ) {
						window.editor = editor;

						console.log( 'Editor is ready.', { editor } );
					},
					onEditorFocus( event, editor ) {
						console.log( 'Editor focused.', { event, editor } );
					},
					onEditorBlur( event, editor ) {
						console.log( 'Editor blurred.', { event, editor } );
					},
					onEditorInput( data, event, editor ) {
						console.log( 'Editor data input.', { event, editor, data } );
					},
					onEditorDestroy( editor ) {
						console.log( 'Editor destroyed.', { editor } );
					}
				}
			}
		);

		app.use( CKEditor ).mount( '#app' );
	</script>
</body>

</html>
